<template>
    <lazy-component class="text-white h-80 overflow-y-auto flex flex-col">
        <OnClickOutside
            @trigger="creating = false"
            class="h-8 flex m-2 outline-dashed outline-2 place-content-center rounded-lg hover:bg-zinc-600 flex-none cursor-pointer"
        >
            <div v-if="creating" class="flex justify-evenly items-center p-2">
                请输入新建色卡名称
                <input
                    v-model="creatingName"
                    class="bg-zinc-700 rounded-full mx-4 px-2"
                    type="text"
                />
                <button @click="addPallet">完成</button>
            </div>
            <Icon v-else class="text-lg text-white w-full" @click="creating = true">add</Icon>
        </OnClickOutside>

        <div
            v-for="(pallet, index) in store.colorPallet "
            class="grid grid-cols-6 place-content-center h-8 hover:bg-zinc-600 transition-colors rounded-lg p-2"
        >
            <div class="flex items-center col-span-2">
                <Checkbox v-model="pallet.using" class="mr-4"></Checkbox>
                {{ pallet.name }}
            </div>
            <div class="flex flex-row col-span-3 overflow-x-auto">
                <div
                    class="h-6 w-6 rounded-full"
                    v-for="color in pallet.colors"
                    :style="{
                        background: color
                    }"
                ></div>
            </div>
            <div class="grid-span-1 flex flex-row w-full justify-evenly">
                <Icon @click="store.editPallet(index)">edit</Icon>
                <Icon @click="store.deletePallet(index)">delete</Icon>
            </div>
        </div>
    </lazy-component>
</template>

<style scoped>
</style>

<script lang="ts" setup>
import { Checkbox, Dialog } from 'vant';
import { useColorPanelStore } from '../store';
import Icon from '@konghayao/vue-material-icons';
import { ref } from 'vue';
import { OnClickOutside } from '@vueuse/components';


const store = useColorPanelStore()
const creating = ref(false)
const creatingName = ref('')
const addPallet = () => {
    store.createPallet(creatingName.value)
    creating.value = false
}
</script>
